<script setup>
import { VueDraggable } from 'vue-draggable-plus'
import { nanoid } from 'nanoid'
import { cloneDeep } from 'lodash-es'
import { useTemplateStore } from '@/stores'

import { provideDragKey } from '../../hooks/use-provide-key'
import useComponentList from '../../hooks/use-component-list'

const { group } = inject(provideDragKey)

const { componentList } = useComponentList()

const customeClone = item => {
  return {
    ...cloneDeep(item),
    id: `${item.field}-${nanoid(4)}`,
    field: `${item.field}-${nanoid(4)}`,
  }
}

const activeTab = ref('template')
const templateStore = useTemplateStore()
const {
  handleSelectTemplate,
  handleDeleteTemplate,
  handleSaveTemplateToLocal,
  handleCreateTemplate,
} = templateStore
const templateList = computed(() => templateStore?.templateList ?? [])
const handleEditTemplateName = async item => {
  const res = await ElMessageBox.prompt('Rename Template', 'Rename', {
    inputValue: item.name,
  })
  handleSaveTemplateToLocal(item.value, res.value)
}
const handleCreateNewTemplate = () => {
  handleCreateTemplate()
  activeTab.value = 'component'
}

defineOptions({ name: 'ComponentPanel' })
</script>

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane
      label="模板"
      name="template"
      class="h-full"
    >
      <el-button
        icon="Plus"
        type="primary"
        class="mt-2 mb-2"
        @click="handleCreateNewTemplate"
        >新建模板</el-button
      >
      <el-scrollbar class="h-full">
        <div
          v-for="item of templateList"
          :key="item.id"
          class="flex flex-items-center cursor-pointer p-3 rounded bg-gray-500/5 hover:bg-gray-500/10"
          :class="
            templateStore.currentTemplate.id === item.id ? 'borderClass' : ''
          "
          @click="handleSelectTemplate(item)"
        >
          <div class="w-full flex justify-between">
            <el-space class="flex-1">
              <el-icon><Document /></el-icon>
              <el-text
                line-clamp="1"
                :title="item.name"
                >{{ item.name }}</el-text
              >
            </el-space>
            <el-button-group>
              <el-button
                icon="Edit"
                type="primary"
                circle
                plain
                @click="handleEditTemplateName(item)"
              ></el-button>
              <el-button
                icon="Delete"
                type="danger"
                plain
                circle
                @click="handleDeleteTemplate(item.id)"
              ></el-button>
            </el-button-group>
          </div>
        </div>
      </el-scrollbar>
    </el-tab-pane>
    <el-tab-pane
      label="组件"
      name="component"
    >
      <el-scrollbar>
        <VueDraggable
          class="flex flex-col gap-2 p-4 w-100p h-full m-auto bg-gray-500/5 rounded overflow-auto"
          v-model="componentList"
          animation="150"
          ghostClass="ghost"
          :group="group"
          :sort="false"
          :clone="customeClone"
        >
          <div
            v-for="item of componentList"
            :key="item.type"
            class="flex flex-items-center cursor-move p-3 rounded bg-gray-500/5 hover:bg-gray-500/10"
          >
            <el-icon>
              <component :is="item.icon ?? 'Plus'" />
            </el-icon>
            <span class="pl-1">{{ item.label }}</span>
          </div>
        </VueDraggable>
      </el-scrollbar>
    </el-tab-pane>
  </el-tabs>
</template>
